<template>
  <div class="own-container">
    <div class="tap" v-if="shopInfo.supports" >
      <!-- 商家活动 -->
      <div class="server" >
        <h1>活动与服务</h1>
        <br />
        <div
          class="server-item"
          v-for="(item, index) in shopInfo.supports"
          :key="index"
        >
          <el-tag size="mini" effect="dark" :type="tagColor[item.type]">{{
            item.name
          }}</el-tag>
          <div class="item-content">{{ item.content }}</div>
        </div>
      </div>
      <!-- 商家实景 -->
      <div class="shopappear">
        <h1>商家实景</h1>
        <div class="shopwarper">
          <ul>
            <li v-for="(img, index) in shopInfo.pics" :key="index">
              <img :src="img" alt="" srcset="" />
            </li>
          </ul>
        </div>
      </div>
      <!-- 商家联系方式 -->
      <div class="info">
        <h1>商家信息</h1>
        <ul>
          <li>
            <span class="info-name">品类</span
            ><span class="info-content">包子粥店，简餐</span>
          </li>
          <li>
            <span class="info-name">商家电话</span
            ><span class="info-content">14747439632</span>
          </li>
          <li>
            <span class="info-name">地址</span
            ><span class="info-content">北京市海淀区1号</span>
          </li>
          <li>
            <span class="info-name">营业时间</span
            ><span class="info-content">09：00-20：00</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapState } from "vuex";
export default {
  name: "ShopOwner",
  data() {
    return {
      tagColor: ["success", "danger", "warning"], //定义不同标签的颜色
    };
  },
  mounted() {
/************************************************************************************** */
    //这里的数据打开父级界面就被加载进来了，所以这里不需要设置延时执行
    //************************************************************************************** */
    this.initScroll();
  },
  computed: {
    ...mapState(["shopInfo"]),
  },
  methods: {
    //初始化滚动条
    initScroll: function () {
      new BScroll(".own-container", {
        probeType: 2, // 因为惯性滑动不会触发
      });
      //初始化商家实景滚动条，一般的滚动条会收到了插件影响
      new BScroll(".shopwarper", {
        probeType: 2,
        scrollX: true,
      });
    },

    //显示商家优惠活动，这里的数据在进入页面的时候就已经加载了
  },
};
</script>
<style lang="less" scoped>
.own-container {
  background-color: #f3f5f7;
  height: calc(100vh - 201px);
  overflow: hidden;
  .tap {
    // overflow:scroll;
    display: flex;
    flex-direction: column;
    .server {
      background-color: white;
      padding: 20px;
      padding-right: 0;
      border-radius: 10px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      h1 {
        font-size: 15px;
        font-weight: 600;
      }
      .server-item {
        display: flex;
        font-size: 12px;
        color: rgb(147, 153, 159);
        align-items: center;
        margin: 5px 0;
        .item-content {
          margin-left: 10px;
        }
      }
    }
    .shopappear {
      background-color: white;
      padding: 20px;
      padding-right: 0;
      border-radius: 10px;
      margin-top: 10px;
      h1 {
        font-size: 15px;
        font-weight: 600;
      }
      .shopwarper {
        // width: 200px;
        margin-top: 10px;
        overflow: hidden;
        white-space: nowrap;
        ul {
          width: 650px;
          display :flex;
        }
        li {
          display: block;
          list-style: none;
          padding: 5px;
          float: left;
          img {
            width: 120px;
            height: 90px;
            border-radius: 5px;
          }
        }
      }
    }
    .info {
      background-color: white;
      padding: 20px;
      padding-right: 0;
      border-radius: 10px;
      margin-top: 10px;
      h1 {
        font-size: 15px;
        font-weight: 600;
      }
      li {
        margin-top: 10px;
        font-size: 12px;
        .info-name {
          font-weight: 600;
        }
        .info-content {
          color: rgb(147, 153, 159);
          display: block;
          float: right;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
